<template>
    <div class="search">
        <Row :gutter="16" class="all-height">
            <Col :span="showRight ? 18 : 24" class="all-height">
                <Card class="all-height card-child-height">
                    <Row class="operation code-row-bg" style="display: flex; justify-content: space-between">
                        <Col span="22">
                            <Button @click="add" type="primary" icon="md-add">添加</Button>
                            <Button @click="delAll" icon="md-trash">批量删除</Button>
                            <Button @click="getDataList" icon="md-refresh">刷新</Button>
                            <Button type="dashed" @click="openTip = !openTip">{{ openTip ? '关闭提示' : '开启提示' }}</Button>
                        </Col>
                        <Col span="2" style="text-align: right">
                            <Icon
                                color="#fff"
                                style="background: rgb(45, 154, 244); border-radius: 50%; padding: 3px"
                                :type="showRight ? `ios-arrow-forward` : `ios-arrow-back`"
                                @click.native="clickShowRight"
                            ></Icon>

                            <!--              <Button :icon="showRight?`ios-arrow-forward`:`ios-arrow-back`"-->
                            <!--                      @click.native="clickShowRight"-->
                            <!--                      type="primary">-->
                            <!--              </Button>-->
                        </Col>
                    </Row>
                    <Row v-show="openTip">
                        <Alert show-icon>
                            已选择
                            <span class="select-count">{{ selectList.length }}</span>
                            项
                            <a class="select-clear" @click="clearSelectAll">清空</a>
                        </Alert>
                    </Row>
                    <Row class="calc-px-height">
                        <Table
                            :height="height1"
                            :loading="loading"
                            border
                            :columns="columns"
                            :data="data"
                            ref="table"
                            sortable="custom"
                            @on-sort-change="changeSort"
                            @on-selection-change="changeSelect"
                        ></Table>
                    </Row>
                    <Row type="flex" justify="end" class="page">
                        <Page
                            :current="searchForm.pageNumber"
                            :total="total"
                            :page-size="searchForm.pageSize"
                            @on-change="changePage"
                            @on-page-size-change="changePageSize"
                            :page-size-opts="[10, 20, 50, 100, 200]"
                            size="small"
                            show-total
                            show-elevator
                            show-sizer
                        ></Page>
                    </Row>
                </Card>
            </Col>
            <Col span="6" class="all-height" v-if="showRight">
                <Card class="all-height card-child-height">
                    <Row v-show="!showDrawer" @keydown.enter.native="handleSearch">
                        <div class="drawer-header">
                            <div style="margin-right: 16px">查询区</div>
                        </div>
                        <Form ref="searchForm" :model="searchForm" inline :label-width="70">
                            <FormItem label="标题" prop="newsTitle">
                                <Input type="text" v-model="searchForm.newsTitle" placeholder="请输入标题" clearable style="width: 200px" />
                            </FormItem>
                            <FormItem label="分类" prop="newsType">
                                <dict dict="newsType" v-model="searchForm.newsCategory" transfer style="width: 200px" />
                            </FormItem>
                            <span v-if="drop">
                                <FormItem label="关键词" prop="newsKeywords">
                                    <Input type="text" v-model="searchForm.newsKeywords" placeholder="请输入关键词" clearable style="width: 200px" />
                                </FormItem>
                                <FormItem label="作者" prop="newsAuthor">
                                    <Input type="text" v-model="searchForm.newsAuthor" placeholder="请输入作者" clearable style="width: 200px" />
                                </FormItem>
                            </span>
                            <FormItem style="margin-left: -35px" class="br">
                                <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                <Button @click="handleReset">重置</Button>
                                <a class="drop-down" @click="dropDown">
                                    {{ dropDownContent }}
                                    <Icon :type="dropDownIcon"></Icon>
                                </a>
                            </FormItem>
                        </Form>
                    </Row>
                    <!--          <Row class="calc-sm-height" v-show="showDrawer">-->

                    <!--          </Row>-->
                </Card>
            </Col>
        </Row>
        <Drawer :title="showType == '1' ? '编辑' : '添加'" v-model="showDrawer" width="1000">
            <addEdit :data="form" ref="edit" :type="showType" @clickFalse="clickFalse" @on-submit="getDataList" />
        </Drawer>

        <!--    <Drawer :title="showType=='1'?'编辑':'新增'" v-model="showDrawer" width="1000">-->
        <!--      <addEdit :data="form" ref="edit" :type="showType" @on-submit="getDataList"/>-->
        <!--    </Drawer>-->
    </div>
</template>

<script>
// 根据你的实际请求api.js位置路径修改
import { getNewsList, deleteNews, updateStatus, disableStatus } from '@/api/news.js';
// 根据你的实际添加编辑组件位置路径修改
import addEdit from './addEdit.vue';
import { shortcuts } from '@/libs/shortcuts';
import dict from '@/views/my-components/xboot/dict';

export default {
    name: 'news',
    components: {
        addEdit,
        dict
    },
    data() {
        return {
            openSearch: true, // 显示搜索
            openTip: true, // 显示提示
            showType: '0', // 添加或编辑标识
            showDrawer: false, // 显示添加编辑抽屉
            loading: true, // 表单加载状态
            drop: false,
            dropDownContent: '展开',
            dropDownIcon: 'ios-arrow-down',
            height1: 0,
            searchForm: {
                // 搜索框初始化对象
                pageNumber: 1, // 当前页数
                pageSize: 50, // 页面大小
                sort: 'createTime', // 默认排序字段
                order: 'desc' // 默认排序方式
            },
            selectList: [], // 多选数据
            form: {
                sortOrder: 0
            },

            columns: [
                // 表头
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    type: 'index',
                    title: '序号',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '标题',
                    key: 'newsTitle',
                    minWidth: 120,
                    sortable: false
                },
                //{
                //  title: "内容",
                //  key: "newsContent",
                //  minWidth: 120,
                //  sortable: false,
                //},
                {
                    title: '分类',
                    key: 'newsCategory',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '关键词',
                    key: 'newsKeywords',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '排序值',
                    key: 'sortOrder',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '作者',
                    key: 'newsAuthor',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '新闻状态',
                    key: 'newsStatus',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        if (params.row.newsStatus == 1) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'success',
                                        text: '已发布'
                                    }
                                })
                            ]);
                        } else if (params.row.newsStatus == 0) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'error',
                                        text: '未发布'
                                    }
                                })
                            ]);
                        }
                    },
                    filters: [
                        {
                            label: '已发布',
                            value: 0
                        },
                        {
                            label: '未发布',
                            value: -1
                        }
                    ],
                    filterMultiple: false,
                    filterRemote: e => {
                        let v = '';
                        if (e.length > 0) {
                            v = e[0];
                        }
                        this.searchForm.status = v;
                        this.searchForm.pageNumber = 1;
                        this.getDataList();
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 170,
                    align: 'center',
                    fixed: 'right',
                    render: (h, params) => {
                        let enableOrDisable = '';
                        if (params.row.newsStatus == 0) {
                            enableOrDisable = h(
                                'a',
                                {
                                    on: {
                                        click: () => {
                                            this.enable(params.row);
                                        }
                                    }
                                },
                                '发布'
                            );
                        } else {
                            enableOrDisable = h(
                                'a',
                                {
                                    on: {
                                        click: () => {
                                            this.disable(params.row);
                                        }
                                    }
                                },
                                '禁用'
                            );
                        }
                        return h('div', [
                            h(
                                'a',
                                {
                                    on: {
                                        click: () => {
                                            this.edit(params.row);
                                        }
                                    }
                                },
                                params.row.newsStatus === 0 ? '编辑' : ''
                            ),

                            h('Divider', {
                                props: {
                                    type: 'vertical'
                                }
                            }),
                            enableOrDisable,
                            h('Divider', {
                                props: {
                                    type: 'vertical'
                                }
                            }),
                            h(
                                'a',
                                {
                                    on: {
                                        click: () => {
                                            this.remove(params.row);
                                        }
                                    }
                                },
                                '删除'
                            )
                        ]);
                    }
                }
            ],
            data: [], // 表单数据
            pageNumber: 1, // 当前页数
            pageSize: 50, // 页面大小
            total: 0, // 表单数据总数
            showRight: true
        };
    },
    methods: {
        tableheig() {
            var bbb = document.getElementsByClassName('calc-px-height')[0].scrollHeight;
            var aaa = document.getElementsByClassName('calc-px-height')[0].children[0].children[0].children[1];
            var ccc = document.getElementsByClassName('calc-px-height')[0].children[0].children[0].children[0].scrollHeight;
            var ddd = bbb - ccc;
            console.log(bbb, '00000000000000');
            aaa.style.height = `${ddd}px`;

            if (this.searchForm.pageSize === 10) {
                this.height1 = 0;
            } else {
                this.height1 = document.getElementsByClassName('calc-px-height')[0].scrollHeight;
                if (this.total < this.searchForm.pageNumber * this.searchForm.pageSize) {
                    var r = (this.searchForm.pageNumber - 1) * this.searchForm.pageSize;
                    var a = this.total - r;
                    var s = a * 43 + 65;
                    if (s < this.height1) {
                        this.height1 = 0;
                    }
                }
            }
            if (this.total < 10) {
                this.height1 = 0;
            }
        },
        init() {
            this.getDataList();
        },
        // 显示隐藏右侧区域
        clickShowRight() {
            this.showRight = !this.showRight;
        },
        // 关闭抽屉
        clickFalse() {
            this.showDrawer = false;
        },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        handleSearch() {
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            this.getDataList();
        },
        handleReset() {
            this.$refs.searchForm.resetFields();
            this.searchForm.pageNumber = 1;
            this.searchForm.pageSize = 50;
            // 重新加载数据
            this.getDataList();
        },
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order === 'normal') {
                this.searchForm.order = '';
            }
            this.getDataList();
        },
        dropDown() {
            if (this.drop) {
                this.dropDownContent = '展开';
                this.dropDownIcon = 'ios-arrow-down';
            } else {
                this.dropDownContent = '收起';
                this.dropDownIcon = 'ios-arrow-up';
            }
            this.drop = !this.drop;
        },
        clearSelectAll() {
            this.$refs.table.selectAll(false);
        },
        changeSelect(e) {
            this.selectList = e;
        },
        getDataList() {
            this.loading = true;
            getNewsList(this.searchForm).then(res => {
                this.loading = false;
                if (res.success) {
                    this.data = res.result.records;
                    this.total = res.result.total;
                    this.tableheig();
                    if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
                        this.searchForm.pageNumber -= 1;
                        this.getDataList();
                    }
                }
            });
        },
        add() {
            this.showType = '2';
            this.showDrawer = true;
            this.$refs.edit.add();
        },
        enable(v) {
            this.$Modal.confirm({
                title: '确认发布',
                content: '您确认要发布此篇新闻 ?',
                loading: true,
                onOk: () => {
                    // v.newsStatus=1;
                    updateStatus(v).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success('操作成功');
                            this.getDataList();
                        }
                    });
                }
            });
        },
        disable(v) {
            this.$Modal.confirm({
                title: '确认禁用',
                content: '您确认要禁用?',
                loading: true,
                onOk: () => {
                    disableStatus(v).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success('操作成功');
                            this.getDataList();
                        }
                    });
                }
            });
        },

        edit(v) {
            // 转换null为""
            for (let attr in v) {
                if (v[attr] == null) {
                    v[attr] = '';
                }
            }
            let str = JSON.stringify(v);
            let data = JSON.parse(str);
            this.form = data;

            this.showType = '1';
            this.showDrawer = true;
            this.$refs.edit.edit(this.form);
        },
        remove(v) {
            this.$Modal.confirm({
                title: '确认删除',
                // 记得确认修改此处
                content: '您确认要删除该条数据?',
                loading: true,
                onOk: () => {
                    // 删除
                    deleteNews({ ids: v.id }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success('操作成功');
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        },
        delAll() {
            if (this.selectList.length <= 0) {
                this.$Message.warning('您还未选择要删除的数据');
                return;
            }
            this.$Modal.confirm({
                title: '确认删除',
                content: '您确认要删除所选的 ' + this.selectList.length + ' 条数据?',
                loading: true,
                onOk: () => {
                    let ids = '';
                    this.selectList.forEach(function (e) {
                        ids += e.id + ',';
                    });
                    ids = ids.substring(0, ids.length - 1);
                    // 批量删除
                    deleteNews({ ids: ids }).then(res => {
                        this.$Modal.remove();
                        if (res.success) {
                            this.$Message.success('操作成功');
                            this.clearSelectAll();
                            this.getDataList();
                        }
                    });
                }
            });
        }
    },
    mounted() {
        this.init();
    }
};
</script>
<style lang="less">
@import '../../../styles/table-common.less';
@import '../../personInfo.less';
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "../../../styles/table-common.less";
//.search {
//    .operation {
//        margin-bottom: 2vh;
//    }
//    .select-count {
//        font-weight: 600;
//        color: #40a9ff;
//    }
//    .select-clear {
//        margin-left: 10px;
//
//
//
//
//    }
//    .page {
//        margin-top: 2vh;
//    }
//    .drop-down {
//        margin-left: 5px;
//    }
//}
</style>
